<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/layouts/default.xhtml">
    <ui:define name="title">eleveSearch</ui:define>
    <ui:param name="menu" value="EleveMenu"/>
    <ui:define name="bodyId">eleveSearch</ui:define>

    <ui:define name="body">
        <div class="col-sm-10">
			<h2>#{text['menu.top.eleve.search']}</h2>

			<h:form id="searchForm" styleClass="well" autocomplete="off">
				<div class="row">
					<div class="col-sm-4 form-group">
	                    <h:outputLabel styleClass="control-label" for="numeroInscription" value="#{text['eleve.numeroInscription']}" />
						<h:inputText id="numeroInscription" value="#{eleveList.eleve.numeroInscription}" styleClass="form-control" required="false" maxlength="15" />
						<p:message for="numeroInscription" />
	                </div>
                </div>
                
                <fieldset>
                    <legend class="accordion-heading">
                        <a data-toggle="collapse" href="#collapse-search"><h:outputText value="#{text['link.search.advanced']}"/></a>
                    </legend>
                    <div id="collapse-search" class="accordion-body collapse">
                    	<div class="form-group">
							<h:selectOneMenu id="classe" styleClass="form-control" value="#{eleveList.eleve.classe.id}" style="width:20%">
								<f:selectItem itemLabel="#{text['form.select']}" itemValue="" />
								<f:selectItems value="#{eleveList.classes}" var="classe" itemLabel="#{classe.nomClasse}" itemValue="#{classe.id}" />
							</h:selectOneMenu>
							<p:message for="classe" />
						</div>
                    	<div class="row">
							<div class="col-sm-6 form-group">
			                    <h:outputLabel styleClass="control-label" for="nom" value="#{text['eleve.nom']}" />
								<h:inputText id="nom" value="#{eleveList.eleve.nom}" styleClass="form-control" required="false" maxlength="50" />
								<p:message for="nom" />
			                </div>
			                
			                <div class="col-sm-6 form-group">
			                    <h:outputLabel styleClass="control-label" for="prenom"	value="#{text['eleve.prenom']}" />
								<h:inputText id="prenom" value="#{eleveList.eleve.prenom}" styleClass="form-control" required="false" maxlength="50" />
								<p:message for="prenom" />
			                </div>
						</div>
                    </div>
               </fieldset>
               
               <div class="row">
	               <div class="col-sm-5 form-group"/>
	               <div class="col-sm-2 form-group">
	               		<h:commandButton value="#{text['button.search']}" styleClass="btn btn-default" action="#{eleveList.search}" />
	               </div>
	               <div class="col-sm-5 form-group"/>
               </div>
			</h:form>
			
			<h2>#{text['eleveList.title']}</h2>
			
			<h:form id="editEleve">

				<p:dataTable id="eleves" var="eleve" value="#{eleveList.elevesResult}"
					sortBy="#{eleveList.sortColumn}" paginator="true" rows="10"
					paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="10,25,50">
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="numeroInscription">
								<h:outputText value="#{text['eleve.numeroInscription']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.numeroInscription}" escape="true" />
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="nom">
								<h:outputText value="#{text['eleve.nom']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.nom}" escape="true" />
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="prenom">
								<h:outputText value="#{text['eleve.prenom']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.prenom}" escape="true" />
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="classe">
								<h:outputText value="#{text['eleve.classe']}" />
							</p:column>
						</f:facet>
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="dateNaissance">
								<h:outputText value="#{text['eleve.dateNaissance']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.dateNaissance}" escape="true">
							<f:convertDateTime pattern="#{text['date.format']}" />
						</h:outputText>
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="dateInscription">
								<h:outputText value="#{text['eleve.dateInscription']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.dateInscription}" escape="true">
							<f:convertDateTime pattern="#{text['date.format']}" />
						</h:outputText>
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<p:column sortBy="telephoneParent">
								<h:outputText value="#{text['eleve.telephoneParent']}" />
							</p:column>
						</f:facet>
						<h:outputText value="#{eleve.telephoneParent}" escape="true" />
					</p:column>
					
				</p:dataTable>
			</h:form>
		</div>
    </ui:define>
</ui:composition>
</html> 